<template>
	<div class="activity-center">
		<div class="activity">		
			<div class="item-list" v-for="(item, index) in activity" :key="index" @click="router({path: '/activityDetails', query:{activity_id: item.id}})">
				<div class="img">
					<img :src="item.img">
				</div>
				<div class="con">
					 <p class="tip">{{item.title}}</p>
					 <p class="video-num">{{item.create_time | formatDate}}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { get_activity_list, baseUrl } from '@/api/api'
import { formatDate } from '@/util/date.js'
export default {
	filters:{
	    formatDate(time){
        let date = new Date(time*1000);
        return formatDate(date,'yyyy.MM.dd');
        //此处formatDate是一个函数，将其封装在common/js/date.js里面，便于全局使用
	    }
	},
  components: {
  },
  data () {
  	return{
  		activity: [],
  		baseUrl,
  	}
  },
  created () {
  	this.get_activity_lists()
  },
  methods: {    
    router (path) {
      this.$router.push(path)
    },
    get_activity_lists () {
    	get_activity_list().then((res) => {
    		console.log(res)
    		this.activity = res.data.info
    	}).catch((err) => {
    		console.log(err)
    	})
    }
  }
}
</script>


<style lang="stylus" scoped>
	.activity
		background #fff
		.item-list
			display flex
			padding 2rem 0
			margin 0 1.5rem
			border-bottom 1px solid #e6e6e6
			.img
				width 12rem
				min-width 12rem
				max-width 12rem
				height 9rem
				border-radius .4rem
				overflow hidden
				position: relative
				margin-right 1.5rem
				img
					width 100%
					height 100%
			.con
				position relative
				.tip
					font-size: 1.5rem;
					line-height: 2.4rem;
					color: #333;
					font-weight: bold;
					height: 4.8rem;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				.video-num
					line-height 1.4rem
					font-size 1.2rem
					color #999
					position absolute
					bottom .3rem
</style>